<template>
	<IsGuest>
		<div class="p-4">
			<h1 class="text-2xl font-bold mb-4">TypeScript 类型检查测试</h1>
			<div class="space-y-4">
				<div class="p-4 border rounded">
					<h2 class="text-lg font-semibold mb-2">路由 Meta 类型检查</h2>
					<p class="text-green-600">✓ 路由 meta 字段类型定义已生效</p>
					<p class="text-sm text-gray-600">
						检查 src/router/routes.ts 中的 meta 字段类型
					</p>
				</div>
				<div class="p-4 border rounded">
					<h2 class="text-lg font-semibold mb-2">国际化消息类型检查</h2>
					<p class="text-green-600">✓ 国际化消息类型定义已生效</p>
					<p class="text-sm text-gray-600">检查 src/locales/index.ts 中的消息类型</p>
				</div>
				<div class="p-4 border rounded">
					<h2 class="text-lg font-semibold mb-2">类型使用示例</h2>
					<pre class="bg-gray-100 p-2 rounded text-sm">{{ typeExamples }}</pre>
				</div>
			</div>
		</div>
	</IsGuest>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import type { RouteMeta, AppRouteRecordRaw } from '@/types/router'
import type { I18nMessages, SupportedLanguages } from '@/types/i18n'

const { t } = useI18n()

// 路由 meta 类型检查示例
const routeMeta: RouteMeta = {
	title: '测试页面',
	authType: '@', // 只能为 '@', '?', '*' 之一
	isMenu: true,
	permission: '测试权限',
	hasFooterToolbar: false
}

// 路由配置类型检查示例
const testRoute: AppRouteRecordRaw = {
	path: '/test/type-check',
	component: () => import('./TypeCheckTest.vue'),
	meta: {
		title: '类型检查测试',
		authType: '@',
		isMenu: true
	}
}

// 国际化消息类型检查示例
const currentLanguage: SupportedLanguages = 'zh-CN'

const typeExamples = ref(`
// 路由 Meta 类型示例
const routeMeta: RouteMeta = {
  title: '页面标题', // 必需
  authType: '@',     // 可选: '@' | '?' | '*'
  isMenu: true,      // 可选
  permission: '权限标识' // 可选
}

// 国际化消息类型示例  
const message: I18nMessages['common'] = {
  save: '保存',
  cancel: '取消',
  // ... 其他必需字段
}

// 支持的语言类型
const lang: SupportedLanguages = 'zh-CN' // 只能是 'zh-CN' | 'en-US' | 'ru-RU'
`)
</script>

<style scoped>
/* 样式 */
</style>
